<template>
  <div class="reset-container">
    <div class="reset-header">
      <span>找回密码</span>
      <span @click="goBack"><svg-icon icon-class="back" />返回登录首页</span>
      <hr>
    </div>
    <div class="reset-body">
      <div class="el-steps el-steps--vertical">
        <div class="el-step is-vertical" style="flex-basis: 200px;">
          <div class="el-step__head is-wait">
            <div class="el-step__line" style="margin-right: 0px;">
              <i class="el-step__line-inner" style="transition-delay: 0ms; border-width: 0px; height: 0%;"></i>
            </div>
            <div class="el-step__icon is-text">
              <div class="el-step__icon-inner"></div>
            </div>
          </div>
          <div class="el-step__main">
            <div class="el-step__title is-wait">第一步：身份验证</div>
            <div class="el-step__description is-wait"></div>
            <div class="step-content">
              <el-form autoComplete="on" :model="userForm1" :rules="userRules1" ref="userForm1" label-position="left">
                <el-form-item prop="phone">
                  <span class="svg-container svg-container_login">
                    <svg-icon icon-class="phone" />
                  </span>
                  <el-input name="phone" type="text" v-model="userForm1.phone"  autoComplete="on" placeholder="请输入手机号码" />
                </el-form-item>
                <el-form-item prop="code">
                  <el-input name="code" class="el-input-w"  v-model="userForm1.code" type="text"  autoComplete="on"
                    placeholder="验证码"></el-input>
                  <span v-show="show" class="code" @click="getCode">获取验证码</span>
                  <span v-show="!show" v-if="count>=10" class="count">{{count}} s</span>
                  <span v-show="!show" v-else="count<10" class="count">0{{count}} s</span>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
        <div data-v-cc7ba256="" class="el-step is-vertical" style="flex-basis: 250px;">
          <div class="el-step__head is-wait">
            <div class="el-step__line">
              <i class="el-step__line-inner"></i>
            </div>
            <div class="el-step__icon is-text">
              <!----><div class="el-step__icon-inner"></div>
            </div>
          </div>
          <div class="el-step__main">
            <div class="el-step__title is-wait">第二步：修改信息</div>
            <div class="el-step__description is-wait"></div>
            <div class="step-content">
              <el-form autoComplete="on" :model="userForm2" :rules="userRules2" ref="userForm2" label-position="left">
                <el-form-item prop="password">
                  <el-input name="password" :type="pwdType" @keyup.enter.native="handleReset" v-model="userForm2.password" autoComplete="on"
                            placeholder="请输入密码"></el-input>
                  <span class="show-pwd" @click="showPwd"><svg-icon icon-class="eye" /></span>
                </el-form-item>
                <el-form-item prop="checkPass">
                  <el-input name="password" :type="pwdType" @keyup.enter.native="handleReset" v-model="userForm2.checkPass" autoComplete="on"
                            placeholder="确认密码"></el-input>
                  <span class="show-pwd" @click="showPwd"><svg-icon icon-class="eye" /></span>
                </el-form-item>
                <el-form-item class="el-form-item-border">
                  <el-button style="width:100%;" :loading="loading" @click.native.prevent="handleReset">
                    找回密码
                  </el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
        <div class="el-step is-vertical" style="flex-basis: 150px;">
          <div class="el-step__head is-wait">
            <div class="el-step__line" style="margin-right: 0px;">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { validateMobile, validateCode } from '@/utils/validate'
import { resetPassword } from '@/api/login'

export default {
  name: 'resetpwd',
  data() {
    const validatePhone = (rule, value, callback) => {
      if (!validateMobile(value)) {
        callback(new Error('请输入正确的手机号'))
      } else {
        callback()
      }
    }
    const validateVerifyCode = (rule, value, callback) => {
      if (!validateCode(value)) {
        callback(new Error('请输入6位有效的验证码'))
      } else {
        callback()
      }
    }
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.userForm2.checkPass !== '') {
          this.$refs.userForm2.validateField('checkPass')
        }
        callback()
      }
    }
    var validatePass1 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.userForm2.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      active: 1,
      userForm1: {
        phone: '',
        code: ''
      },
      userRules1: {
        phone: [{ required: true, message: '请输入正确的手机号', trigger: 'blur', validator: validatePhone }],
        code: [{ required: true, trigger: 'blur', validator: validateVerifyCode }]
      },
      userForm2: {
        password: '',
        checkpass: ''
      },
      userRules2: {
        password: [{ required: true, trigger: 'blur', validator: validatePass }],
        checkPass: [{ required: true, trigger: 'blur', validator: validatePass1 }]
      },
      loading: false,
      showDialog: false,
      show: true,
      count: '',
      timer: null,
      second: 60,
      pwdType: 'password'
    }
  },
  methods: {
    showPwd() {
      if (this.pwdType === 'password') {
        this.pwdType = ''
      } else {
        this.pwdType = 'password'
      }
    },
    goBack() {
      this.$router.push({ path: '/login' })
    },
    getCode() {
      this.$refs.userForm1.validateField('phone', (valid) => {
        if (!valid.length) {
          const data = {}
          data.flag = 2
          data.phone = this.userForm1.phone
          this.$store.dispatch('Smscode', data).then(() => {
            if (!this.timer) {
              this.count = this.second
              this.show = false
              this.timer = setInterval(() => {
                if (this.count > 0 && this.count <= this.second) {
                  this.count--
                } else {
                  this.show = true
                  clearInterval(this.timer)
                  this.timer = null
                }
              }, 1000)
            }
          })
        }
      })
    },
    handleReset() {
      var flag = 1
      this.$refs.userForm1.validate(valid => {
        if (!valid) {
          flag = 0
        }
      })
      this.$refs.userForm2.validate(valid => {
        if (!valid) {
          flag = 0
        }
      })
      if (flag === 1) {
        resetPassword(this.userForm2).then(response => {
          if (response.code === 1) {
            this.$message({
              title: '成功',
              message: '密码已重置!',
              type: 'success',
              duration: 3000
            })
            setTimeout(() => {
              this.$router.push({ path: '/login' })
            }, 3 * 1000)
          } else {
            setTimeout(() => {
              this.$message.error(response.data.msg)
            }, 3 * 1000)
          }
        })
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
  $bg:#2d3a4b;
  $light_gray:#eee;

  /* reset element-ui css */
  .reset-container {
    .el-input {
      display: inline-block;
      height: 47px;
      width: 85%;
      input {
        background: transparent;
        border: 0px;
        -webkit-appearance: none;
        border-radius: 0px;
        padding: 12px 5px 12px 15px;
        color: $light_gray;
        height: 47px;
        &:-webkit-autofill {
          -webkit-box-shadow: 0 0 0px 1000px $bg inset !important;
          -webkit-text-fill-color: #fff !important;
        }
      }
    }
    .el-form-item {
      border: 3px solid rgba(255, 255, 255, 0.1);
      background: $bg;
      border-radius: 5px;
      color: #454545;
    }
    .el-form-item-border{
      border: none;
    }
    .el-input-w {
      width: 65.2%;
    }
    .el-step__icon.is-text {
      border-radius: 50%;
      border: 4px solid #16b8bd!important;
      margin-left: 5px;
    }
    .el-step__icon {
      position: relative;
      z-index: 1;
      display: -webkit-inline-box;
      display: -ms-inline-flexbox;
      display: inline-flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      width: 12px;
      height: 12px;
      font-size: 14px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      background: #fff;
      -webkit-transition: .15s ease-out;
      transition: .15s ease-out;
    }
    .el-step__head.is-wait {
      color: #c0c4cc;
      border-color: #16b8bd;
    }


  }

</style>


<style rel="stylesheet/scss" lang="scss" scoped>

  .el-step__icon.is-text {
    border-radius: 50%;
    border: 12px solid;
    border-color: inherit;
  }

  .reset-container {
    position: fixed;
    height: 100%;
    width: 100%;
    background: url("../../assets/images/bg.jpg");
    .reset-header {
      width: 520px;
      padding-top: 35px;
      margin: 220px auto;
      color: #fff;
      hr{
        border:0;
        background-color:#f3f3f3;
        height:1px;
      }
      span {
        &:first-of-type {
          display: inline-block;
        }
        &:last-of-type {
          margin-left: 339px;
          display: inline-block;
          cursor: pointer;
        }
      }
    }
    .reset-body {
      position: absolute;
      top: 300px;
      left: 0;
      right: 0;
      color: #fff;
      width: 520px;
      padding: 35px 35px 15px 35px;
      margin: 20px auto;
      min-height: 400px;
      color: #fff
    }
    .step-content{
      padding-top: 20px;
      min-height: 150px;
      width: 100%;
    }
    .svg-container {
      padding-left: 11px;
      color: #fff;
      vertical-align: middle;
      width: 30px;
      display: inline-block;
      &_login {
        font-size: 20px;
      }
    }
    .show-pwd {
      position: absolute;
      right: 10px;
      top: 7px;
      font-size: 16px;
      color: #889aa4;
      cursor: pointer;
      user-select: none;
    }
    .code{
      text-align: center;
      background-color: rgba(255, 255, 255, 0.1);
      width: 138px;
      height: 47px;
      line-height: 49px;
      color: #ffff;
      display: inline-block;
      cursor: pointer;
      border: none;
    }
    .count{
      text-align: center;
      background-color: rgba(255, 255, 255, 0.1);
      width: 138px;
      height: 47px;
      line-height: 49px;
      color: #ffff;
      display: inline-block;
      cursor: pointer;
      border: none;
    }
  }
</style>
